<template>
	<view>
		<ul class="list p30"> 
			<li @tap.stop @tap="go('../mySortProductList/mySortProductList?id='+v.id+'&name='+v.name,v)" v-for="(v,i) in list" :key="i">
				{{v.name}}    ({{v.count}})
				<view v-if="v.name =='未分类商品' && !productCreate" class="fr">
					管理商品
				</view>
				<view @tap.stop @tap="openMore(i)" v-show="v.name !='未分类商品'" class="fr"> 
					<image src="../../static/image/more.png" mode=""></image>
					<view v-show="v.order == true " @tap.stop class="more">
						<i></i>
						<span @tap="open(v,i)">删除</span>
						<span @tap="inputShow('update',v,i)">重命名</span>
						<span v-if="!productCreate" @tap="go('../mySortProductList/mySortProductList?id='+v.id+'&name='+v.name)">管理商品</span>
					</view>
				</view>
			</li>
		</ul>
		<u-button  @tap="inputShow('add')"  class="btn" type="success">添加分类</u-button>
		<modelsInput :title='title' :plTxt="plTxt" ref="modelsInputs" @success="success"></modelsInput>
		<u-modal v-model="show" content="确认删除？" @confirm="delect" show-cancel-button></u-modal>
	</view>
</template>

<script>
	import modelsInput from '../../components/models-input/models-input.vue';
	import {productCategory,productCategoryList,productCategoryUpdate,productCategoryDelect} from '@/api/api.js'
	export default {
		components:{modelsInput},
		data() {
			return {
				productCreate:false,
				show: false,
				type:'',
				act:{},
				list:[],
				plTxt:'',
				title:'',
				stops:false,
				pageable:{
					pageNumber:1,
					pageSize:10
				}
			};
		},
		onLoad(e) {
			if(e.productCreate){
				this.productCreate = true
			}
			
		},
		onShow() {
			this.inits()
		},
		onReachBottom() {
			if(!this.stops){
				this.init()
			} 
		},
		methods:{
			go(url,v){ 
				if(!this.productCreate){
					this.$navigateTo(url)
				}else{
					uni.setStorageSync('produceSortSet',v)
					uni.navigateBack()
				} 
			},
			open(v, i) {
				this.show = true;
				this.act.item = v
				this.act.i = i 
			},
			async delect() {
				let data = await productCategoryDelect({
					id: this.act.item.id
				})
				if (data.code == 0) {
					this.list.splice(this.act.i, 1)
				}
				if (this.list.length < 3) {
					this.inits()
				}
			},
			inits(){
				this.list = []
				this.stops = false
				this.pageable.pageNumber = 1
				this.init()
			},
			openMore(i){
				this.list[i].order = !this.list[i].order
			}, 
			async init(){
				let data = await productCategoryList({
					pageable:this.pageable
				})
				
				let list  = data.data.content
				if(list.length  < this.pageable.pageSize){
					this.stops  = true
				}
				this.list = [...this.list,...list]
				this.pageable.pageNumber++
			},
			inputShow(type,value,i){
				this.type = type
				if(value){
					this.act.item = value
					this.act.i = i
				} 
				if(type == 'add'){
					this.title = '添加分类'
					this.plTxt = '请填写分类名称'
				}
				if(type == 'update'){
					this.title = '修改分类'
					this.plTxt = '请填写分类名称'
				}
				this.$refs['modelsInputs'].show();
			},
			async success(e){
				if(this.type =='add'){
					let data  =  await productCategory({name:e})
					if(data.code ==0){
						this.inits()
					}
				}
				if(this.type =='update'){
					let data  =  await productCategoryUpdate({
						name:e,
						id:this.act.item.id
					})
					if(data.code ==0){
						this.list[this.act.i].name = e
					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
.list{
	padding-bottom: 200rpx;
}
li{ 
	margin-top: 26rpx;
	height: 150rpx;
	background: #FFFFFF;
	box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.03);
	border-radius: 20rpx; 
	font-size: 32rpx; 
	color: #191919;
	padding: 0 30rpx;
	line-height: 150rpx; 
	.fr{
		color: #1BBF7F;
		position: relative;
	}
	image{
		width: 40rpx;
		height: 10rpx;
	}
	.more{
		position: absolute;
		right: -30rpx;
		width: 390rpx;
		height: 100rpx;
		background: #000000;
		opacity: 0.6;
		border-radius: 10rpx;
		display: flex; 
		font-size: 28rpx; 
		color: #FFFFFF;
		line-height: 100rpx;
		z-index: 3;
		i{
			position: absolute;
			top: -10rpx;
			right: 10rpx;
			width: 30rpx;
			height: 30rpx;
			background: #000000;
			 transform:rotate(45deg);
		}
		span{
			width: 50%;
			text-align: center;
			border-right: 1px solid white;
		}
		span:nth-of-type(3){
			border: none;
		}
		
	}
}
.btn{
	width: 690rpx;
	height: 84rpx;
	border-radius: 50rpx;
	position: fixed;
	left: 30rpx; 
	bottom: 40rpx;
}
</style>
